<template>
  <div class="add-plan">
    <van-nav-bar title="规划" left-text="返回" left-arrow @click-left="router.go(-1)" />
    <div class="header">
      <van-tabs v-model:active="active" swipeable @click-tab="changTab">
        <van-tab title="上午"><CommonTemplate :title="'上午'" :info="formPlan.morning" /></van-tab>
        <van-tab title="下午"
          ><CommonTemplate :title="'下午'" :info="formPlan.afternoon"
        /></van-tab>
        <van-tab title="晚上"><CommonTemplate :title="'晚上'" :info="formPlan.evening" /></van-tab>
      </van-tabs>
    </div>
    <div class="common-adlity">
      <div class="label">
        <div class="desc" @click="addTagHide = true">标签+</div>
        <div class="tag-list">
          <div class="tag" v-for="(item, index) in formPlan.tags" :key="index + 1">
            <img
              src="https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E6%A0%87%E7%AD%BE_1.png"
              alt=""
            />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="look-total" @click="overlayShow = true">预览</div>
    </div>
    <div class="ai-chat" @click="aiOptimaze">一键优化</div>
    <div class="footer">
      <div class="btn">
        <van-button color="rgb(180, 219, 235)" @click="addPlan">新增</van-button>
        <van-button color="rgb(96, 171, 236)" @click="submitPlan">确认</van-button>
      </div>
    </div>
    <van-action-sheet v-model:show="show" title="添加任务">
      <div class="action-sheet-content">
        <div class="choose-time">
          <van-collapse v-model="activeNames" :accordion="true">
            <van-collapse-item :title="'开始时间' + startTime" name="1">
              <van-time-picker
                @confirm="chooseTime(1)"
                @cancel="cancelChooseTime"
                v-model="currentTime"
                title="开始时间"
                :columns-type="columnsType"
              />
            </van-collapse-item>
            <van-collapse-item :title="'结束时间' + endTime" name="2">
              <van-time-picker
                @confirm="chooseTime(2)"
                v-model="currentTime"
                title="结束时间"
                :columns-type="columnsType"
              />
            </van-collapse-item>
          </van-collapse>
          <div class="task-content">
            <van-cell-group inset>
              <van-field
                v-model="taskContent"
                rows="1"
                autosize
                type="textarea"
                placeholder="请输入任务内容 "
              />
            </van-cell-group>
            <div class="asc-btn">
              <van-button @click="addTask">确认</van-button>
            </div>
          </div>
        </div>
      </div>
    </van-action-sheet>
    <van-overlay :show="overlayShow" @click="overlayShow = false" lock-scroll>
      <div class="overlay-body">
        <div class="morning">
          <h3>上午</h3>
          <van-cell-group v-if="formPlan.morning.length > 0">
            <van-cell
              v-for="(item, index) in formPlan.morning"
              :key="index + 1"
              :title="item.startTime + '~' + item.endTime"
              :label="item.task"
            ></van-cell>
          </van-cell-group>
          <van-empty v-else :image-size="[100, 60]" description="暂无任务"></van-empty>
        </div>
        <div class="afternoon">
          <h3>下午</h3>
          <van-cell-group v-if="formPlan.afternoon.length > 0">
            <van-cell
              v-for="(item, index) in formPlan.afternoon"
              :key="index + 1"
              :title="item.startTime + '~' + item.endTime"
              :label="item.task"
            ></van-cell>
          </van-cell-group>
          <van-empty v-else :image-size="[100, 60]" description="暂无任务"></van-empty>
        </div>
        <h3>晚上</h3>
        <van-cell-group v-if="formPlan.evening.length > 0">
          <van-cell
            v-for="(item, index) in formPlan.evening"
            :key="index + 1"
            :title="item.startTime + '~' + item.endTime"
            :label="item.task"
          ></van-cell>
        </van-cell-group>
        <van-empty v-else :image-size="[100, 60]" description="暂无任务"></van-empty>
      </div>
    </van-overlay>
    <van-action-sheet title="新增标签" v-model:show="addTagHide">
      <div class="add-tag-body">
        <van-field label="标签" v-model="tagName" placeholder="请输入标签名"></van-field>
        <van-button class="btn" @click="addTag">确定</van-button>
      </div>
    </van-action-sheet>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CommonTemplate from './components/CommonTemplate.vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { addPlanService } from '@/api/Plan.js'

const router = useRouter()

const formPlan = ref({
  tags: [],
  morning: [],
  afternoon: [],
  evening: [],
})
const startTime = ref('')
const endTime = ref('')
const taskContent = ref('')

const show = ref(false)
const currentTime = ref(['00', '00'])
const columnsType = ['hour', 'minute']
const active = ref(0)
// 手风琴
const activeNames = ref([])

// 预览遮罩层的显示隐藏
const overlayShow = ref(false)
// 新增标签
const addTagHide = ref(false)
// 标签名
const tagName = ref('')

/**
 * 新增计划
 */
const addPlan = () => {
  show.value = true
}
/**
 * 提交每日规划
 */
const submitPlan = () => {
  if (
    formPlan.value.morning.length !== 0 &&
    formPlan.value.afternoon.length !== 0 &&
    formPlan.value.evening.length !== 0
  ) {
    addPlanService(formPlan.value).then((res) => {
      console.log('res', res)
      router.push('/community')
    })
  }
  showToast({
    message: '请添加任务',
    type: 'text',
  })
}
/**
 * 标签栏切换，触发函数
 * @param e
 */
const changTab = (e) => {
  active.value = e.name
}
/**
 * 选择时间
 */
const chooseTime = (index) => {
  activeNames.value = []
  switch (index) {
    case 1:
      // 开始时间
      startTime.value = currentTime.value[0] + ':' + currentTime.value[1]
      break
    case 2:
      // 结束时间
      endTime.value = currentTime.value[0] + ':' + currentTime.value[1]
      break
  }
}
const cancelChooseTime = () => {
  activeNames.value = []
}
/**
 * 新增任务
 */
const addTask = () => {
  if (startTime.value === '' || endTime.value === '') {
    return showToast({
      message: '请选择开始时间和结束时间',
      type: 'fail',
    })
  }
  if (taskContent.value === '') {
    return showToast({
      message: '请输入任务内容',
      type: 'fail',
    })
  }
  switch (active.value) {
    case 0:
      formPlan.value.morning.push({
        startTime: startTime.value,
        endTime: endTime.value,
        task: taskContent.value,
        type: active.value + 1,
        isDo: 0,
      })
      break
    case 1:
      formPlan.value.afternoon.push({
        startTime: startTime.value,
        endTime: endTime.value,
        task: taskContent.value,
        type: active.value + 1,
        isDo: 0,
      })
      break
    case 2:
      formPlan.value.evening.push({
        startTime: startTime.value,
        endTime: endTime.value,
        task: taskContent.value,
        type: active.value + 1,
        isDo: 0,
      })
      break
  }
  startTime.value = ''
  endTime.value = ''
  taskContent.value = ''
  show.value = !show.value
}
/**
 * 新增标签
 */
const addTag = () => {
  if (formPlan.value.tags.length > 2) {
    showToast({
      message: '最多只能添加三条标签哦',
      type: 'text',
    })
    addTagHide.value = false
    tagName.value = ''
    return false
  }
  if (tagName.value === '') {
    return showToast({
      message: '标签名不能为空',
      type: 'text',
    })
  }
  if (tagName.value.length > 5) {
    return showToast({
      message: '表情名长度最多为5个字符',
      type: 'text',
    })
  }
  formPlan.value.tags.push({ name: tagName.value })
  addTagHide.value = false
  tagName.value = ''
}

/**
 * ai优化
 */
const aiOptimaze = () => {
  console.log(formPlan.value)
}
</script>

<style lang="scss" scoped>
.add-plan {
  .header {
    overflow: scroll;
    border-bottom: 0.5px solid #d4d5d6;
  }

  .common-adlity {
    height: 36px;
    line-height: 36px;
    padding: 0px 20px;
    display: flex;
    justify-content: space-between;

    .label {
      display: flex;
      gap: 15px;
      .desc {
        font-size: 13px;
        font-weight: 600;
        color: #63b7e4;
      }
      .tag-list {
        display: flex;
        align-items: center;
        gap: 5px;
        .tag {
          height: 20px;
          padding: 5px;
          display: flex;
          align-items: center;
          width: fit-content;
          border-radius: 7px;
          color: #fff;
          background-color: #63c0f1;

          img {
            width: 18px;
            height: 18px;
          }
          span {
            font-size: 11px;
          }
        }
      }
    }

    .look-total {
      cursor: pointer;
    }
  }

  .ai-chat {
    padding: 0px 20px;
    text-align: right;
    color: #63b7e4;
    font-size: 13px;
    font-family: '猫糖圆体';
    cursor: pointer;
    &:hover {
      color: #44b1ec;
    }
  }

  .footer {
    width: 100vw;
    position: fixed;
    bottom: 10px;

    .btn {
      width: 100%;
      display: flex;
      justify-content: space-around;

      :deep(.van-button) {
        width: 150px;
        height: 36px;
        border-radius: 15px;
      }
    }
  }

  .action-sheet-content {
    padding: 16px 16px 160px;
    position: relative;

    .asc-btn {
      position: absolute;
      bottom: 10px;
      left: 50%;
      right: auto;
      transform: translateX(-50%);

      :deep(.van-button) {
        height: 36px;
        width: 220px;
        border-radius: 15px;
      }
    }
  }
}

.overlay-body {
  height: 100vh;
  padding: 20px;
  background-color: #fff;
  overflow: scroll;

  h3 {
    height: 36px;
    line-height: 36px;
    color: #6dc7f7;
  }
}

.add-tag-body {
  padding: 16px 16px 160px;
  position: relative;
  .btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 80%;
    border-radius: 9px;
    background-color: #72b6f1;
    color: #fff;
    border: none;
  }
}
</style>